<script setup lang="ts">
import commentAnalySis from './index/index.vue'
import sku from './sku/index.vue'
import wordFrequencyAnalyse from './wordFrequencyAnalyse/index.vue'
import {TRequest} from "~/utils/ali/PCRequest";
import moment from "moment";
import { RateList } from '../components/index/commentAnalysis';

import trend from './trend/index.vue'

const emit = defineEmits(['update:visible'])
const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false,
  },
  _attributeId: {
    type: String,
    required: true,
    default: "",
  },
  _hasContent: {
    type: Boolean,
    required: false,
    default: false,
  },
  commentNumber: {
    type: Number,
    required: false,
    default: undefined,
  },
  _commentFilter: {
    type: Number,
    required: false,
    default: 0,
  },
  item: {
    type: Object as PropType<ItemInterface>,
    required: true,
    default: () => {
    },
  },
});

const activeKey = ref('1');
const page = ref(1);
const dataTotal = ref(0)
const sourceData = ref<RateList[]>([])
const dataLoading = ref(false)

let showData = ref(false);
let timerShow: ReturnType<typeof setTimeout>;

const loadData = () => {
  if (timerShow) {
    clearTimeout(timerShow);
  }
  showData.value = false;
  TRequest.rateLists(props.item.itemId(), page.value++, props._attributeId).then(res => {
    dataTotal.value = props.commentNumber || res.total;
    for (let i = 0; i < res.rateList.length; i++) {
      let ditem = res.rateList[i];
      ditem.rateTypeName = ['差评', '中评', '好评'][parseInt(ditem.rateType) + 1];
      if (typeof ditem.appendedFeed != "undefined") {
        ditem.appendedFeedback = ditem.appendedFeed.appendedFeedback || '';
        ditem.appendedFeedPicPathList = ditem.appendedFeed.appendedFeedPicPathList || [];
        ditem.appendedFeedDate = moment(new Date(ditem.feedbackDate)).add(ditem.appendedFeed.intervalDay, 'days').format('YYYY-MM-DD');
        ditem.appendedReplay = ditem.appendedFeed.reply || '';
      } else {
        ditem.appendedFeedback = '';
        ditem.appendedFeedPicPathList = [];
        ditem.appendedFeedDate = '';
        ditem.appendedReplay = '';
      }
      sourceData.value.push(ditem);
    }
    dataCount.value += 1;

    timerShow = setTimeout(() => {
      showData.value = true;
      clearTimeout(timerShow);
    }, 1000);

  }).catch((e) => {
    dataLoading.value = false;
  });
}
const dataCount = ref(0)
let timerId: ReturnType<typeof setTimeout>;


// 定时获取数据
const timeGetData = () => {
  dataLoading.value = true;
  if (sourceData.value.length == 0) {
    loadData();
    dataCount.value++;
    setTimeout(() => {
      timeGetData();
    }, 3000);
    return
  }
  if (sourceData.value.length >= dataTotal.value) {
    return stopTimerAndResetDataCount()
  } else {
    timerId = setTimeout(() => {
      if (dataCount.value <= 5) {
        loadData();
        timeGetData();
      } else {
        stopTimerAndResetDataCount()
      }
    }, 3000);
  }

}
// 停止获取数据 重置计时器
const stopTimerAndResetDataCount = () => {
  clearTimeout(timerId);
  dataCount.value = 0;
  dataLoading.value = false;
};

const reLoad = async () => {
  page.value = 1;
  sourceData.value = [];
  dataTotal.value = 0;
  dataCount.value = 0;
  timeGetData()
}

reLoad()

const loadDataBtn = (type: string) => {
  if (type == 'stop') {
    stopTimerAndResetDataCount()
  } else {
    timeGetData()
  }
}

// 评价趋势图数据编辑
let title1 = reactive(['首评有图', '首评无图']);
let title2 = reactive(['追评有图', '追评无图']);
</script>

<template>
  <a-modal 
    title="评论分析" 
    style="top:20px;" 
    :footer="null" 
    :visible="visible"
    @cancel="emit('update:visible',false)"
    width="95%"
  >
    <a-tabs v-model:active-key="activeKey" style="margin-top: -10px;">
      <a-tab-pane tab="评论分析" key="1">
        <commentAnalySis 
          :dataList="sourceData"
          :total="dataTotal"
          :loading="dataLoading"
          @loadDataBtn="loadDataBtn"
        />
      </a-tab-pane>
      <a-tab-pane tab="SKU分析" key="2">
        <sku :id="props.item.itemId()" :commentSourceData="sourceData" />
      </a-tab-pane>
      <a-tab-pane tab="每日评论趋势" key="3">

        <!-- 嘿嘿： 我是每日评论趋势 -->
        <trend v-if="showData" :lineTitle="title1" :sourceData="sourceData" :msgTitle="'每日评价趋势'"></trend>
        <trend v-if="showData" :lineTitle="title2" :sourceData="sourceData" :msgTitle="'每日追评趋势'"></trend>
      </a-tab-pane>
      <a-tab-pane tab="词频分析" key="4">
        <wordFrequencyAnalyse :commentSourceData="sourceData" />
      </a-tab-pane>
      
    </a-tabs>
  </a-modal>
</template>

<style scoped>

</style>
